<!-- 文章阅读 -->
<template>
  <view class="articleRead screen-width">
    <view class="articleRead_center">
      <view class="option_top">
        <view @tap="handleTimeSort" class="select" :class="timeSort ? 'active' : ''">
          时间排序
          <van-icon :name="timeSort ? 'arrow-up' : 'arrow-down'" />
        </view>
        <view @tap="handleReadSort" class="select" :class="readSort ? 'active' : ''">
          阅读排序
          <van-icon :name="readSort ? 'arrow-up' : 'arrow-down'" />
        </view>
      </view>
      <view class="main_content">
        <view
          @tap="shareListDetails(item.articleId, item.articleType)"
          class="item"
          v-for="item in ArticleShareList"
          :key="item.articleId"
        >
          <view class="title">{{ item.articleTitle }}</view>
          <view class="info">
            <view class="data">{{ item.createTime }}</view>
            <view class="reader">阅读: {{ item.browseTotal }}</view>
          </view>
        </view>
      </view>
    </view>
    <Festival></Festival>
  </view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      ArticleShareList: [], // 文章分享列表
      readSort: "", // 阅读排序
      timeSort: "" // 时间排序
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 点击分享列表
    shareListDetails(id, type) {
      if (type == 0) {
        // 政策通知
        uni.navigateTo({
          url: "/pages/policy/policyDetails?id=" + id + "&inform=通知"
        });
      } else {
        uni.navigateTo({
          url: "/pages/policy/policyDetails?id=" + id + "&inform=解读"
        });
      }
    },
    // 时间排序
    handleTimeSort() {
      if (this.timeSort) {
        this.timeSort = false;
        this.timeSort = 0;
      } else {
        this.timeSort = true;
        this.timeSort = 1;
      }
      this.getAricleShareList();
    },
    // 阅读排序
    handleReadSort() {
      if (this.readSort) {
        this.readSort = false;
        this.readSort = 0;
      } else {
        this.readSort = true;
        this.readSort = 1;
      }

      this.getAricleShareList();
    },
    // 获取文章列表
    getAricleShareList() {
      let obj = {
        readSort: this.readSort,
        timeSort: this.timeSort
      };
      this.$get("/bmj-api/api/ums/umsArticleShare/list", obj).then(res => {
        console.log(res);
        if (res.code == 200) {
          let { records } = res.result;
          this.ArticleShareList = records;
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getAricleShareList();
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.articleRead {
  .articleRead_center {
    padding: 0 30rpx;
    .option_top {
      height: 120rpx;
      display: flex;
      align-items: center;
      .select {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 32rpx;
        background-color: #fff;
        color: #4c97ff;
        width: 45%;
        padding: 10rpx 15rpx;
        margin-right: 30rpx;
        border-radius: 15rpx;
        &.active {
          background-color: #e4e4e4;
        }
      }
    }
    .main_content {
      .item {
        margin-top: 20rpx;
        background-color: #fff;
        padding: 15rpx 30rpx;
        .title {
          font-size: 34rpx;
        }
        .info {
          display: flex;
          height: 80rpx;
          align-items: center;
          justify-content: space-between;
          color: #ccc;
          .data {
            text {
            }
          }
          .reader {
          }
        }
      }
    }
  }
}
</style>
